<template>
	<a-modal :visible="visible" :title="moveType==1?'移动到':'复制到'" :bodyStyle="{
      padding: '20px 60px',
      paddingTop: '0',
    }" :width="600" :footer="null" @cancel="cancelClick" destroyOnClose>
		<a-tabs v-model:activeKey="activeKey" @change="tabChange" v-if="fileData.merchant_library_id">
			<a-tab-pane v-for="item in tabList" :key="item.id" :tab="item.group_name" />
		</a-tabs>
		<!-- 剪切 -->
		<a-radio-group v-if="moveType==1" v-model:value="radio">
			<a-radio :style="radioStyle" v-for="item in radioList" :key="item.id" :value="item.id"
				style="margin-top: 5px">
				<a-row :gutter="[6, 16]" align="middle">
					<a-col>
						<cu-icon class="icon" type="icon-wenjianjia1" style="font-size: 30px; cursor: pointer" />
					</a-col>
					<a-col>
						{{ item.folder_name }}
					</a-col>
				</a-row>
				<cu-icon class="icon icon-postion" :type="iconData[item.folder_type]" style="color: #fff" />
			</a-radio>
		</a-radio-group>
		<!-- 复制 -->
		<a-checkbox-group v-if="moveType==2" v-model:value="checkbox">
			<a-checkbox :style="radioStyle" v-for="item in radioList" :key="item.id" :value="item.id"
				style="margin-top: 5px; position: relative;">
				<a-row :gutter="[6, 16]" align="middle">
					<a-col>
						<cu-icon class="icon" type="icon-wenjianjia1" style="font-size: 30px; cursor: pointer" />
					</a-col>
					<a-col>
						{{ item.folder_name }}
					</a-col>
				</a-row>
				<cu-icon class="icon icon-postion" :type="iconData[item.folder_type]" style="color: #fff" />
			</a-checkbox>
		</a-checkbox-group>
		
		<div class="footer">
			<a-space>
				<a-button @click="cancelClick" ghost type="primary"
					style="border: 1px solid #e0e0e6; color: #000; border-radius: 6px">取消</a-button>
				<a-button type="primary" style="background: #2878FF; border: none; border-radius: 5px"
					@click="submitClick" :loading="loading">确定</a-button>
			</a-space>
		</div>
	</a-modal>
</template>

<script>
	import {
		message
	} from "ant-design-vue";
	import {
		reactive,
		toRefs,
		computed,
		defineComponent,
		watch
	} from "vue";
	import request from "../../../../common/utils/request";

	export default defineComponent({
		name: "MoveModal",
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			id: {
				type: [Number, String],
				default: 0,
			},
			fileData: {
				type: Object,
				default: () => {
					return {};
				},
			},
			list: {
				type: Array,
				default: () => {
					return [];
				},
			},
			moveType: {
				type: Number,
				default: 1 //1、移动  2、复制
			}
		},
		setup(props, {
			emit
		}) {
			const state = reactive({
				count: 0,
				activeKey: "",
				tabList: [],
				loading: false,
				radio: "",
				checkbox: [],
				radioStyle: {
					display: "flex",
					width: "500px",
					height: "30px",
				},
				radioList: [],
				iconData: {
					image: "icon-tupian1",
					audio: "icon-yuyin",
					text: "icon-zhinengwenan",
					video: "icon-shipin",
				},
			});

			const cancelClick = () => {
				emit("onCancel");
			};

			const tabChange = (e) => {
				state.radio = "";
				let list = [];
				state.tabList.forEach((item) => {
					if (item.id == e) {
						if (item.get_folder_statck) {
							list.push(...item.get_folder_statck);
						}
					}
				});
				state.radioList = list;
			};

			const submitClick = () => {
				if ((!state.radio && props.moveType == 1) || (!state.checkbox?.length && props.moveType == 2)) {
					message.warn("请选择文件");
					return;
				}
				
				if(props.moveType == 2){
					request.put('/work_ai', '/user/shotstack/media/copy', {
						ids: props.list,
						folderIds: state.checkbox
					}).then(res=> {
						message.success("复制成功");
						emit("onSubmit");
						state.loading = false;
					}).catch(() => {
						state.loading = false;
					});
					return
				}
				
				state.loading = true;
				if (props.fileData.folder_type == "text") {
					request
						.put("/work_ai", "/user/shotstack/text", {
							ids: props.list,
							merchant_folder_statck_id: state.radio,
						})
						.then((res) => {
							message.success("移动成功");
							emit("onSubmit");
							state.loading = false;
						})
						.catch(() => {
							state.loading = false;
						});
				} else {
					request
						.put("/work_ai", "/user/shotstack/media/move", {
							ids: props.list,
							merchant_folder_statck_id: state.radio,
						})
						.then((res) => {
							message.success("移动成功");
							emit("onSubmit");
							state.loading = false;
						})
						.catch(() => {
							state.loading = false;
						});
				}
			};

			const getShotstackGroup = () => {
				request
					.get("/work_ai", "/user/shotstack/group", {
						merchant_library_id: props.fileData.merchant_library_id,
						material_type: props.fileData.folder_type,
						folder_use_type: props.fileData.folder_use_type,
						merchant_folder_statck_id: props.fileData.id
					})
					.then((res) => {
						state.activeKey = res.result[0].id;
						state.tabList = res.result;
						if (props.fileData.merchant_library_id) {
							state.radioList = res.result[0].get_folder_statck;
						} else {
							state.radioList = res.result;
						}
					});
			};

			watch(
				() => props.visible,
				(val) => {
					if (val) {
						getShotstackGroup();
					} else {
						state.radio = "";
						state.checkbox = [];
					}
				}
			);

			return {
				...toRefs(state),
				cancelClick,
				submitClick,
				getShotstackGroup,
				tabChange,
			};
		},
	});
</script>

<style lang="less" scoped>
	:deep(.ant-radio) {
		top: -1px;
	}
	
	:deep(.ant-checkbox) {
		top: -1px;
	}

	.icon-postion {
		position: absolute;
		top: 9px;
		left: 30px;
		font-size: 17px;
	}

	.footer {
		width: 100%;
		text-align: right;
		margin-top: 40px;
	}

	:deep(.ss-radio){
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		color: rgba(0, 0, 0, 0.85);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5715;
		list-style: none;
		font-feature-settings: "tnum";
		position: relative !important;
		top: -3px;
		display: inline-block;
		outline: none;
		cursor: pointer;
	}
	
	:deep(.ss-checkbox){
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		color: rgba(0, 0, 0, 0.85);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5715;
		list-style: none;
		font-feature-settings: "tnum";
		position: relative  !important;
		top: -3px;
		display: inline-block;
		outline: none;
		cursor: pointer;
	}
	
	:deep(.ss-checkbox-wrapper){
		margin-left: 0px;
	}
</style>